import React, { useCallback, useState } from 'react'
import { homeRoutes } from '../router/index'
import { Outlet, useNavigate, Link } from 'react-router-dom'
import { AutoFit } from "autofit.js-react";
import Hoc_login from '@/utils/Hoc_login';


import img0 from "../../public/icon2/智能检测 Normal.png"
import img1 from "../../public/icon2/就业态势 Normal.png"
import img2 from "../../public/icon2/安防管理 Normal.png"
import img3 from "../../public/icon2/设备运维 Normal.png"
import img4 from "../../public/icon2/智能检测.png"
import img5 from "../../public/icon2/就业态势.png"
import img6 from "../../public/icon2/安防管理.png"
import img7 from "../../public/icon2/设备运维.png"


function Home() {
    const imglist = [img0, img1, img2, img3]        //高亮之前的图标
    const imglists = [img4, img5, img6, img7]       //高亮之后的图标
    const [i, seti] = useState(0)
    const qie = useCallback((index) => {
        seti(index)
    }, [])


    return (
        <AutoFit id="container" className="container" designWidth="1920" designHeight="1080">
            <div className='boxWrap'>
                <header></header>
                <main>
                    <div className='leftMain'></div>
                    <div className='mainBox'></div>
                    <div className='rightMain'></div>

                    <div style={{ position: 'absolute', width: '100%', height: "100%" }}>
                        <Outlet />
                    </div>
                </main>
                <footer>
                    {/* tab组件 */}
                    {
                        homeRoutes && homeRoutes.map((item, index) => {
                            return (
                                <Link style={{ textDecoration: 'none' }} to={item.path} key={index}>
                                    <img src={index == i ? imglists[i] : imglist[index]} alt="" onClick={() => qie(index)} style={{ width: '5rem' }} />
                                </Link>
                            )
                        })
                    }
                </footer>
            </div>
        </AutoFit>
    )
}

export default Hoc_login(Home)